template(name="globalSearchHeaderBar")
  if currentUser
    h1
      | 🔍
      | {{_ 'globalSearch-title'}}

template(name="globalSearchModalTitle")
  if currentUser
    h2
      | ⌨️
      | {{_ 'globalSearch-title'}}

template(name="resultsPaged")
  if resultsHeading.get
    h1
      = resultsHeading.get
      a(title="{{_ 'link-to-search' }}" href="{{ getSearchHref }}")
        | 🔗
  each card in results.get
    +resultCard(card)
  table.global-search-footer
    tr
      td.global-search-previous-page
        if hasPreviousPage.get
          button.js-previous-page
            | {{_ 'previous-page' }}
      td.global-search-next-page(align="right")
        if hasNextPage.get
          button.js-next-page
            | {{_ 'next-page' }}

template(name="globalSearch")
  if currentUser
    .wrapper
      form.global-search-page.js-search-query-form
        input.global-search-query-input(
          style="{# if hasResults.get #}display: inline-block;{#/if#}"
          id="global-search-input"
          type="text"
          name="searchQuery"
          placeholder="{{_ 'search-example'}}"
          value="{{ query.get }}"
          autofocus dir="auto"
        )
        a.js-new-search
          | 🧹
      if debug.get.show
        h1 Debug
        if debug.get.showSelector
          h2 Selector
            button.js-copy-debug-selector
              = 'Copy'
          pre(
            id="debug-selector"
          )
            = sessionData.selector
        if debug.get.showProjection
          h2 Projection
            button.js-copy-debug-projection
              = 'Copy'
          pre(
            id="debug-projection"
          )
            = sessionData.projection
      if searching.get
        +spinner
      else if hasResults.get
        .global-search-results-list-wrapper
          if hasQueryErrors.get
            ul
              each msg in errorMessages
                li.global-search-error-messages
                  = msg
          +resultsPaged(this)
      else if serverError.get
        .global-search-page
          .global-search-help
            h1 {{_ 'server-error' }}
            +viewer
              | {{_ 'server-error-troubleshooting' }}
      else
        .global-search-page
          .global-search-help
            h2 {{_ 'boards' }}
            .lists-wrapper
              each title in myBoardNames.get
                span.card-label.list-title.js-board-title
                  = title
            h2 {{_ 'lists' }}
            .lists-wrapper
              each title in myLists.get
                span.card-label.list-title.js-list-title
                  = title
            h2 {{_ 'label-colors' }}
            .palette-colors: each label in labelColors
              span.card-label.palette-color.js-label-color(class="card-label-{{label.color}}")
                = label.name
            if myLabelNames.get.length
              h2 {{_ 'label-names' }}
              .lists-wrapper
                each name in myLabelNames.get
                  span.card-label.list-title.js-label-name
                    = name
          .global-search-instructions
            +viewer
              = searchInstructions
